<template>
    <div class="leftContentOne">
        <!--第一部分-->
        <div class="province">
            <div class="provinceTitle">
                <!--宽窄竖线-->
                <div class="doubleLine lf">
                    <div class="wide lf"></div>
                    <div class="narrow lf"></div>
                </div>
                <!--浙江省-->
                <div class="zjProvince lf">
                    <div class="provinceName lf" @click="handleCityClick()">浙江省</div>
                    <div class="selectBtn lf" @click="handleCityClick()"></div>
                    <div class="shis" v-if="isShis">
                        <!-- <div class="provinceSelect">
                            <span>浙江省</span>
                        </div>
                        <div class="cityies">
                            <router-link 
                                v-for="(item, index) of shisList" 
                                :key="index"
                                :to="'/cityW/' + item.name">
                                <div style="color:white" 
                                    :class="{'cityActive': isCityActive == index }" 
                                    :cityX="item.x"
                                    :cityY="item.y"
                                    @click="toThisCity(index)"  
                                    @mousemove="handleCityActive(index)">{{item.name}}</div>
                            </router-link>
                        </div> -->
                        <common-selecty></common-selecty>
                    </div>
                </div>
            </div>
            <div class="threeLine">
                <div class="firstLine lf"></div>
                <div class="secondLine lf"></div>
                <div class="thirdLine lf"></div>
            </div>
            <div class="twoCharts">
                <!--第一个图标-->
                <div class="firstChart lf">
                    <div class="chartTitle1">
                        <div class="littleLine lf"></div>
                        <div class="chartTitle lf">站点类型统计</div>
                    </div>
                    <div id="chart1"></div>
                </div>
                <!--第二个图表-->
                <div class="secondChart lf">
                    <div class="chartTitle2">
                        <div class="littleLine lf"></div>
                        <div v-if="$store.state.changeN == 0" class="chartTitle lf">舒适度站点统计</div>
                        <div v-if="$store.state.changeN == 1" class="chartTitle lf">度假站点统计</div>
                        <div v-if="$store.state.changeN == 2" class="chartTitle lf">风寒站点统计</div>
                        <div v-if="$store.state.changeN == 3" class="chartTitle lf">温湿站点统计</div>
                    </div>
                    <div v-show="$store.state.changeN == 0" id="chart2"></div>
                    <div v-show="$store.state.changeN == 1" id="chart3"></div>
                    <div v-show="$store.state.changeN == 2" id="chart4"></div>
                    <div v-show="$store.state.changeN == 3" id="chart5"></div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import axios from 'axios'
import CommonSelecty from "../../commons/CommonSelecty"
let echarts = require('echarts');
export default {
    name: 'LeftContentOne',
    components: {
        CommonSelecty
    },
    props:{
        option:Array
    },
    
    data(){
        return{
            isShis:false,
            isCityActive: 0,
            city: '杭州',
            
            shisList:[{name:'杭州',x:120.155161,y:30.236581},
                    {name:'宁波',x:121.541642,y:29.869131},
                    {name:'温州',x:120.705859,y:27.997299},
                    {name:'湖州',x:120.029758,y:30.869052},
                    {name:'嘉兴',x:120.770034,y:30.770431},
                    {name:'绍兴',x:120.562848,y:29.998565},
                    {name:'金华',x:119.641762,y:29.117773},
                    {name:'衢州',x:118.887113,y:28.93023},
                    {name:'舟山',x:122.170168,y:30.005134},
                    {name:'台州',x:121.427809,y:28.663282},
                    {name:'丽水',x:119.92771,y:28.473243}]
        }
    },
    props:{
        StationTypeCounts:Array,
        FYLZStationBCMIDJCounts:Array,
        FYLZStationHCIDJCounts:Array,
        FYLZStationWCIDJCounts:Array,
        FYLZStationTHIDJCounts:Array
    },
    watch:{
        StationTypeCounts(){
            this.getProvinceDataInfo()
        },
        FYLZStationBCMIDJCounts(){
            this.getProvinceDataInfo()
        },
        FYLZStationBCMIDJCounts(){
            this.getProvinceDataInfo()
        },
        FYLZStationBCMIDJCounts(){
            this.getProvinceDataInfo()
        },
        FYLZStationBCMIDJCounts(){
            this.getProvinceDataInfo()
        },
    },
    mounted(){
        this.getProvinceDataInfo()
        
    },
    methods: {
        handleCityClick(city){
            // this.$store.dispatch('changeCity', city)
            this.isShis = !this.isShis

        },
        handleCityActive(index){
            this.isCityActive = index
        },
        getProvinceDataInfo(){
            var  chart1Data = [];
            for(var i=0;i< this.StationTypeCounts.length; i++){
                chart1Data[i]={};   
                chart1Data[i].name= this.StationTypeCounts[i].StationType
                chart1Data[i].value= this.StationTypeCounts[i].Count
            }
            var  chart2Data = new Array(3);
           
            for(var i=0;i< this.FYLZStationBCMIDJCounts.length;i++){
                
                // chart2Data[i]={};   
                // chart2Data[i].name= this.FYLZStationBCMIDJCounts[i].DJ
                // chart2Data[i].value= this.FYLZStationBCMIDJCounts[i].Count
                if(this.FYLZStationBCMIDJCounts[i].DJ=="舒适"){
                    chart2Data[0]={};   
                    chart2Data[0].name= this.FYLZStationBCMIDJCounts[i].DJ
                    chart2Data[0].value= this.FYLZStationBCMIDJCounts[i].Count
                }else if(this.FYLZStationBCMIDJCounts[i].DJ=="一般舒适"){
                    chart2Data[1]={};   
                    chart2Data[1].name= this.FYLZStationBCMIDJCounts[i].DJ
                    chart2Data[1].value= this.FYLZStationBCMIDJCounts[i].Count
                }else if(this.FYLZStationBCMIDJCounts[i].DJ=="不舒适"){
                    chart2Data[2]={};   
                    chart2Data[2].name= this.FYLZStationBCMIDJCounts[i].DJ
                    chart2Data[2].value= this.FYLZStationBCMIDJCounts[i].Count
                }
            }
            var  chart3Data = new Array(3);
            for(var i=0;i< this.FYLZStationHCIDJCounts.length;i++){
                
                if(this.FYLZStationHCIDJCounts[i].DJ=="特别适宜"){
                    chart3Data[0]={};   
                    chart3Data[0].name = this.FYLZStationHCIDJCounts[i].DJ
                    chart3Data[0].value= this.FYLZStationHCIDJCounts[i].Count
                }else if(this.FYLZStationHCIDJCounts[i].DJ=="适宜"){
                    chart3Data[1]={};   
                    chart3Data[1].name = this.FYLZStationHCIDJCounts[i].DJ
                    chart3Data[1].value= this.FYLZStationHCIDJCounts[i].Count
                }else if(this.FYLZStationHCIDJCounts[i].DJ=="不适宜"){
                    chart3Data[2]={};   
                    chart3Data[2].name = this.FYLZStationHCIDJCounts[i].DJ
                    chart3Data[2].value= this.FYLZStationHCIDJCounts[i].Count
                } 
            }
            var  chart4Data = new Array(4);
            for(var i=0;i< this.FYLZStationWCIDJCounts.length;i++){
                if(this.FYLZStationWCIDJCounts[i].DJ=="无胁迫"){
                    chart4Data[0]={};
                    chart4Data[0].name= this.FYLZStationWCIDJCounts[i].DJ
                    chart4Data[0].value= this.FYLZStationWCIDJCounts[i].Count
                }else if(this.FYLZStationWCIDJCounts[i].DJ=="弱冷胁迫"){
                    chart4Data[1]={};
                    chart4Data[1].name= this.FYLZStationWCIDJCounts[i].DJ
                    chart4Data[1].value= this.FYLZStationWCIDJCounts[i].Count
                }else if(this.FYLZStationWCIDJCounts[i].DJ=="中冷胁迫"){
                    chart4Data[2]={};
                    chart4Data[2].name= this.FYLZStationWCIDJCounts[i].DJ
                    chart4Data[2].value= this.FYLZStationWCIDJCounts[i].Count
                }else if(this.FYLZStationWCIDJCounts[i].DJ=="强冷胁迫"){
                    chart4Data[3]={};
                    chart4Data[3].name= this.FYLZStationWCIDJCounts[i].DJ
                    chart4Data[3].value= this.FYLZStationWCIDJCounts[i].Count
                }   
            }
            var  chart5Data =new Array(4);
            for(var i=0;i< this.FYLZStationTHIDJCounts.length;i++){
                if(this.FYLZStationTHIDJCounts[i].DJ=="无胁迫"){
                    chart5Data[0]={};   
                    chart5Data[0].name= this.FYLZStationTHIDJCounts[i].DJ
                    chart5Data[0].value= this.FYLZStationTHIDJCounts[i].Count
                }else if(this.FYLZStationTHIDJCounts[i].DJ=="弱温湿胁迫"){
                    chart5Data[1]={};   
                    chart5Data[1].name= this.FYLZStationTHIDJCounts[i].DJ
                    chart5Data[1].value= this.FYLZStationTHIDJCounts[i].Count
                }else if(this.FYLZStationTHIDJCounts[i].DJ=="中温湿胁迫"){
                    chart5Data[2]={};   
                    chart5Data[2].name= this.FYLZStationTHIDJCounts[i].DJ
                    chart5Data[2].value= this.FYLZStationTHIDJCounts[i].Count
                }  else if(this.FYLZStationTHIDJCounts[i].DJ=="强温湿胁迫"){
                    chart5Data[3]={};   
                    chart5Data[3].name= this.FYLZStationTHIDJCounts[i].DJ
                    chart5Data[3].value= this.FYLZStationTHIDJCounts[i].Count
                }  
            }
            let myChart1 = echarts.init(document.getElementById('chart1'));
            let myChart2 = echarts.init(document.getElementById('chart2'));  
            let myChart3 = echarts.init(document.getElementById('chart3'));  
            let myChart4 = echarts.init(document.getElementById('chart4'));  
            let myChart5 = echarts.init(document.getElementById('chart5'));       
            myChart1.setOption({
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                    position: [20, 20]
                },
                color:['#37A2DA', '#9FE6B8'],
                legend: {
                    itemHeight: 10,
                    itemWidth: 14,
                    orient: 'vertical',
                    x : '',
                    y : 'top',
                    data:[{name:'基本站',icon: 'rect'},{name:'功能站',icon:'rect'}],
                    textStyle:{
                        color:'#fff',
                        fontSize: 12
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'站点类型统计',
                        type:'pie',
                        radius : [10,'77%'] ,
                        hoverAnimation: false,
                        center : ['68%', '44%'],//圆心距离容器边缘的距离
                        roseType : 'radius',
                        label: {
                            normal: {
                                show: false,
                                position: 'inside'
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: chart1Data
                    }
                ]
            })
            let option2 = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color:['#32F3A9','#63B5E6','#E8CE67'],
                legend: {
                    orient: 'vertical',
                    itemWidth: 12,//图例大小
                    itemHeight: 8,
                    itemGap: 2,//图例之间的间距
                    left: -5,//图例距离容器距离
                    x : '',
                    y : 'top',
                    textStyle:{
                        color:'#fff',
                        fontSize: 12
                    },
                    data: [ { name:'舒适', icon: 'rect'},
                            { name:'一般舒适',icon: 'rect'},
                            { name:'不舒适',icon: 'rect'}
                        ]
                },
                calculable : true,
                series : [
                    {
                        name: '站点舒适度评价统计(个)',
                        type: 'pie',
                        radius : [0,'79%'],
                        center: ['68%', '44%'],
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'inside'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:chart2Data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            let option3 = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color:['#32F3A9','#63B5E6','#E8CE67' ],
                legend: {
                    orient: 'vertical',
                    itemWidth: 12,//图例大小
                    itemHeight: 8,
                    itemGap: 2,//图例之间的间距
                    left: -5,//图例距离容器距离
                    x : '',
                    y : 'top',
                    textStyle:{
                        color:'#fff',
                        fontSize: 12
                    },
                    data: [ {name:'特别适宜',icon: 'rect'},
                            {name:'适宜', icon: 'rect'},
                            {name:'不适宜', icon: 'rect'}

                        ]
                },
                calculable : true,
                series : [
                    {
                        name: '站点度假指数评价统计(个)',
                        type: 'pie',
                        radius : [0,'79%'],
                        center: ['68%', '44%'],
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'inside'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:chart3Data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            let option4 = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color:['#32F3A9','#32F3A9','#63B5E6','#E8CE67' ],
                // color:['#0CDE4E','#32F3A9','#2C9DE3','#6AA6C9'],
                legend: {
                    orient: 'vertical',
                    itemWidth: 12,//图例大小
                    itemHeight: 8,
                    itemGap: 2,//图例之间的间距
                    left: -5,//图例距离容器距离
                    x : '',
                    y : 'top',
                    textStyle:{
                        color:'#fff',
                        fontSize: 12
                    },
                    data: [ 
                            {name:'无胁迫',icon: 'rect'},
                            {name:'弱冷胁迫',icon: 'rect'},
                            {name:'中冷胁迫',icon: 'rect'},
                            {name:'强冷胁迫',icon: 'rect'}
                        ]
                },
                calculable : true,
                series : [
                    {
                        name: '站点风寒指数评价统计(个)',
                        type: 'pie',
                        radius : [0,'79%'],
                        center: ['68%', '44%'],
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'inside'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:chart4Data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            let option5 = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color:['#32F3A9','#32F3A9','#63B5E6','#E8CE67' ],
                legend: {
                    orient: 'vertical',
                    itemWidth: 12,//图例大小
                    itemHeight: 8,
                    itemGap: 2,//图例之间的间距
                    left: -5,//图例距离容器距离
                    x : '',
                    y : 'top',
                    textStyle:{
                        color:'#fff',
                        fontSize: 12
                    },
                    data: [
                            {name:'无胁迫',icon: 'rect'},
                            {name:'弱温湿胁迫',icon: 'rect'},
                            {name:'中温湿胁迫',icon: 'rect'},
                            {name:'强温湿胁迫',icon: 'rect'}
                        ]
                },
                calculable : true,
                series : [
                    {
                        name: '站点温湿指数评价统计(个)',
                        type: 'pie',
                        radius : [0,'79%'],
                        center: ['68%', '44%'],
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'inside'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: chart5Data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            myChart2.setOption(option2)
            myChart3.setOption(option3)
            myChart4.setOption(option4)
            myChart5.setOption(option5)
            if(document.documentElement.clientHeight <= 768){
                    option2.legend.itemWidth = 10;
                    option2.legend.itemHeight = 6;
                    option2.legend.itemGap=0;
            }else{
                    option2.legend.itemWidth = 12;
                    option2.legend.itemHeight = 8;
                    option2.legend.itemGap=2;
            }
            
            window.addEventListener("resize", function () {   
                myChart1.resize();
                myChart2.resize();
                myChart3.resize();
                myChart4.resize();
                myChart5.resize();
            });   
        
        }
       
    }
}
</script>

<style lang="stylus" scoped>
    /* 样式穿透 */
    .leftContentOne >>> .littleLine
        width: .02rem
        height: .16rem
        background : #41E6FD
        margin-left: .11rem
        margin-right: .05rem
    .leftContentOne >>> .secondChart
        .littleLine
            margin-left: .06rem
    .leftContentOne >>> .chartTitle
            height: .16rem
            line-height : .16rem
    /* 所有样式 */
    .leftContentOne
        width: 4.03rem
        height: 20vh
        color: white
        background :rgba(7,23,42,0.49)
        .province
            height: 20vh
            .provinceTitle
                width: 100%
                height: 5vh
                padding-top: 1.8vh
                .doubleLine
                    width: .11rem
                    height: 1.9vh
                    .wide
                        width: .07rem
                        height: 1.9vh
                        background : #41E6FD
                    .narrow
                        width: .02rem
                        height: 1.9vh
                        background : #41E6FD
                        margin-left: .02rem
                .zjProvince
                    font-size: .18rem
                    font-family: FZZXHJW--GB1-0
                    margin-left: .12rem
                    position: relative
                    .provinceName
                        color: white
                        cursor :pointer
                        padding-right:.1rem
                    .selectBtn
                        width: 0
                        height: 0
                        border: 8px solid transparent;
                        border-top:  8px solid #41E6FD
                        margin-top: .05rem
                        cursor :pointer
                    .shis
                        min-height:18.9vh
                        position:absolute
                        left:0px
                        top:13px
                        z-index:100
                        cursor : pointer
                        display : flex
                        .provinceSelect
                            width:100%
                            height:31px
                            padding-bottom:30px
                            border-bottom: 1px solid #59E1FE
                            span
                                background:#59E1FE
                                padding:0px 10px
                                font-size:.18rem
                                color:black
                        .cityies
                            padding:7px
                            div
                                float:left
                                width:.60rem
                                height:.4rem

            .threeLine
                width: 100%
                height: .03rem
                .firstLine
                    width: 3.4rem
                    height: .03rem
                    background : #41E6FD
                .secondLine
                    width: .08rem
                    height: .03rem
                    background: rgba(255,255,255,.54)
                    margin-left: .06rem
                    margin-right: .04rem
                .thirdLine
                    width: .44rem
                    height: .03rem
                    background: #FFFFFF
            .twoCharts
                height:15vh
                .firstChart
                    width: 1.94rem
                    height: 15vh
                    padding-top: 2.3vh
                    .chartTitle1
                        width: 2.01rem
                        height: 3.5vh
                        font-size: .14rem
                    #chart1
                        width: 10.64875vw
                        height: 11.48vh
                .secondChart
                    width: 1.76rem
                    height: 15vh
                    padding-top: .25rem
                    margin-left: .20rem
                    .chartTitle2
                        width: 1.81rem
                        height: 3.5vh
                        font-size: .14rem
                    #chart2
                        width: 9.427vw
                        height: 11.48vh
                    #chart3
                        width: 9.427vw
                        height: 11.48vh
                    #chart4
                        width: 9.427vw
                        height: 11.48vh
                    #chart5
                        width: 9.427vw
                        height: 11.48vh
                        
</style>


